<template>
	<view class="goodsInfo">
		<!-- <uni-search-bar style="background-color: #fff;" @confirm="search" v-model="queryParam.NameorCode"
			@cancel="cancel">
		</uni-search-bar> -->
		<view class="container">
			<view class="left">
				<view :class="current==index?'leftItem active':'leftItem'" v-for="item,index in typeData" :key="item.Id"
					@click="changeType(index,item.InduusTypeId)">
					{{item.Name}}
				</view>
			</view>
			<view class="right">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower">
					<uni-list v-if="typeData.length>0">
						<uni-list-item v-for="item in typeData[current].subData" :key="item.Id" :title="item.cInvName"
							:note="'￥'+momenyFormat(item.iInvRCost)"
							:thumb="item.Picture?item.Picture:'/static/none.png'" thumb-size="lg">
							<template v-slot:footer>
								<view class="footerCheck">
									<checkbox-group @change="checkboxChangeItem($event,item)">
										<checkbox :checked="item.Checked" />
									</checkbox-group>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</view>
		</view>
		<view class="tabbar">
			<checkbox-group @change="checkboxChangeAll">
				<checkbox :checked="isAllChecked" />全选
			</checkbox-group>
			<view class="submitOrder" @click="submitOrderCart">
				完成复制
			</view>
		</view>
	</view>
</template>

<script>
	import {
		momenyFormat
	} from '@/util/util.js'
	export default {
		data() {
			return {
				typeData: [],
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 30,
				},
				total: 0,
				queryParam: {
					"Condition": "Name",
					"Keyword": "",
					"CommpayId": "",
				},
				current: 0,
				CompanyId: ''
			}
		},
		computed: {
			isAllChecked() {
				if (this.typeData.length > 0 && this.typeData[this.current].subData) {
					let arr = this.typeData[this.current].subData.filter(item => item.Checked)
					if (arr.length > 0 && arr.length == this.typeData[this.current].subData.length) return true
					else return false
				} else {
					return false
				}
			}
		},
		onLoad() {
			this.CompanyId = uni.getStorageSync('CompanyInfo').Id
			this.queryParam.CommpayId = this.CompanyId
			this.getTypeList()
		},
		methods: {
			// 单个商品选择
			checkboxChangeItem(e, item) {
				if (e.detail.value.length > 0) this.$set(item, 'Checked', true)
				else this.$set(item, 'Checked', false)
			}, // 全选
			checkboxChangeAll(e) {
				// isAllChecked 分类全选
				if (e.detail.value.length > 0) {
					this.typeData[this.current].isAllChecked = true
					this.typeData[this.current].subData.forEach(item => {
						this.$set(item, 'Checked', true)
					})
				} else {
					this.typeData[this.current].isAllChecked = false
					this.typeData[this.current].subData.forEach(item => {
						this.$set(item, 'Checked', false)
					})
				}
			},
			lower() {
				if (this.typeData[this.current].subData.length >= this.typeData[this.current].total) return
				this.typeData[this.current].PageIndex++
				uni.showLoading()
				this.$http('post', '/BO/InventType/GetInitiInvent', {
						PageIndex: this.typeData[this.current].PageIndex,
						PageRows: 30,
						Search: {
							"Keyword": this.typeData[this.current].InduusTypeId
						}
					})
					.then(res => {
						uni.hideLoading()
						if (res.Success) {
							if (this.isAllChecked) res.Data.forEach(item => item.Checked = true)
							this.typeData[this.current].subData = this.typeData[this.current].subData.concat(res.Data)
							this.typeData[this.current].total = res.Total
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
			},
			// 查询
			search() {
				if (this.typeData.length <= 0) return uni.showToast({
					icon: 'none',
					title: '请先添加分类'
				})
				this.getDataList(this.typeData[this.current].InduusTypeId)
			},
			// 左侧点击
			changeType(index, pid) {
				this.current = index
				if (this.typeData[index].subData.length > 0) return
				this.getDataList(pid)
			},
			// 分类列表
			getTypeList() {
				uni.showLoading()
				this.$http('post', '/BO/InventType/GetInitiType', {
						Search: {
							CommpayId: uni.getStorageSync('CompanyInfo').Id
						}
					})
					.then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.typeData = res.Data.map(item => {
								return {
									...item,
									subData: [],
									PageIndex: 1,
									total: 0
								}
							})
							if (this.typeData.length > 0) this.getDataList(this.typeData[this.current].InduusTypeId)
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
						console.log(this.typeData[this.current].total);
					})
			},
			// 商品列表
			getDataList(pid) {
				uni.showLoading()
				this.$http('post', '/BO/InventType/GetInitiInvent', {
						...this.pagination,
						Search: {
							"Keyword": pid
						}
					})
					.then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.typeData[this.current].subData = res.Data
							this.typeData[this.current].total = res.Total
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})
			},
			// 保存
			submitOrderCart() {
				// 取出所有选择数据
				this.typeData.forEach(item => {
					item.selectData = item.subData.filter(im => im.Checked)
				})
				let arr = this.typeData.filter(item => item.selectData.length > 0 || item.isAllChecked)
				if (arr.length <= 0) return this.$api.msg('请选择商品')
				uni.showLoading({
					title: '数据保存中,请稍后',
					mask: true
				})
				let newArr = []
				arr.forEach(item => {
					if (item.isAllChecked) {
						newArr.push({
							"TypeId": item.Id,
							"ISselectall": true,
							"CompanyId": this.CompanyId,
							InduusTypeId: item.InduusTypeId,
							list: []
						})
					} else {
						newArr.push({
							"TypeId": item.Id,
							"Id": "",
							"ISselectall": false,
							"CompanyId": this.CompanyId,
							InduusTypeId: item.InduusTypeId,
							list: []
						})
						newArr[newArr.length - 1].list = item.selectData.map(im => {
							return {
								"cInvCode": im.cInvCode,
								"cInvName": im.cInvName,
								"cInvStd": im.cInvStd,
								"iInvRCost": 0,
								"TypeId": item.Id,
								"GroupName": im.GroupName,
								"IndInventId": im.Id,
								"Picture": im.Picture
							}
						})

					}
				})
				this.$http('post', '/BO/InventType/AddSelectAll', newArr).then(res => {
					uni.hideLoading()
					console.log(res);
					if (res.Success) {
						this.$api.msg('操作成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else this.$api.msg(res.Msg)
				})
			},
			cancel() {
				this.queryParam.Keyword = ''
				if (this.typeData.length > 0) this.getDataList(this.typeData[this.current].Id)
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.footerCheck {
		display: flex;
		align-items: center;
	}

	.goodsInfo {
		display: flex;
		flex-direction: column;
		height: 100%;

		.container {
			display: flex;
			background-color: #fff;
			// height: calc(100% - 56px - 120rpx);
			height: calc(100% - 120rpx);

			.left {
				width: 100px;
				background-color: #f5f5f5;
				text-align: center;
				overflow-y: scroll;
				height: 100%;
				box-sizing: border-box;
				padding-bottom: 30rpx;

				.leftItem {
					line-height: 2.5;
					font-weight: 600;
					color: #999;
					font-size: 15px;
				}

				.active {
					color: #000;
					background-color: #fff;
				}
			}

			.right {
				flex: 1;
				// overflow-y: scroll;
				max-height: 100%;
			}
		}

		.tabbar {
			display: flex;
			width: 100%;
			height: 120rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			border-top: 1px solid #E0E0E0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.submitOrder {
				width: 208rpx;
				height: 80rpx;
				background-image: linear-gradient(to right, #38FFCB, #2979FF);
				border-radius: 60rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2.57rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>